<template>
  <div class="daily-tasks">
    <header class="daily-tasks__header">
      <ZTab v-model:navs="navs" v-model:active="navsActive" @change="changeTaskTabs"/>
    </header>
    <section class="daily-tasks__content">
      <ul>
        <li v-for="item in sortFilterList(filterTaskList)">
          <div class="daily-tasks__left" :class="{'receive': item.status == 1}">
            <img class="daily-tasks-icon" :src="item.currencyIcon" alt="">
            <span>{{Number(item.completionReward).toFixed(2)}}</span>
            <img class="daily-tasks-receive" :src="images.receive" alt="">
          </div>
          <div class="daily-tasks__right">
            <div class="daily-tasks__right-head">
              {{ item.genreName }}
            </div>
            <div class="daily-tasks__right-desc">
              {{ item.content }}
            </div>
          </div>
          <div class="daily-tasks__receive" v-if="item.status == 0" @click="receive(item)">{{t('home.Receive')}}</div>
        </li>
      </ul>
    </section>
    <section class="daily-tasks__footer" v-if="navsActive === 'day'">
      {{ t("home.task1") }}
      <div class="daily-tasks__time">
        {{ receiveCountdown }}
      </div>
    </section>
  </div>
</template>

<script setup lang="ts" name="DailyTasks">
import activeApi from '@/api/modules/active';
import systemApi from '@/api/modules/system';
import system from '@/store/system';
import userinfo from '@/store/userinfo';

const images: any = reactive({
  receive: new URL(`../../assets/images/tasks/receive.svg`, import.meta.url).href,
});

const piniaSystem:any = system();
const piniaUserinfo:any = userinfo();

const { t } = useI18n();

const data: any = reactive({
  navs: [
    {
      label: t('home.DailyTasks'),
      active: 'day',
    },
    {
      label: t('home.Novicetasks'),
      active: 'new',
    },
  ],
  navsActive: "day",
  taskList: [],
  filterTaskList: [],
  receiveCountdown: "00:00:00",
  timer: null,
});

const {
  navs,
  navsActive,
  taskList,
  filterTaskList,
  receiveCountdown,
  timer,
} = toRefs(data);

// 国际化
const changLang = () => {
  filterTaskList.value.forEach((element:any, index: any) => {
    const current = element.lanManages.find((im:any)=>im.languageCode === piniaSystem.getLang.code) || (element.lanManages && element.lanManages[0]);
    const wallet = piniaUserinfo.getWallet.find((im:any)=>im.currencyId === element.awardType);
    element.content = current.content;
    element.key = element.tid + index;
    element.genreName = t(`home.${element.contentInfo.replace('code_0', 'test')}`);
    element.currencyIcon = wallet.currencyIcon;
  });
  console.log(filterTaskList.value)
}

// 切换tab时过滤数据
const filterTaskData = () => {
  if(navsActive.value === 'day'){
    // 每日任务
    filterTaskList.value = taskList.value.filter((im:any)=>im.genre === 2);
  }else if(navsActive.value === 'new'){
    // 新手任务
    filterTaskList.value = taskList.value.filter((im:any)=>im.genre === 1);
  }
  changLang();
}

// 排序
const sortFilterList = (list: any) => {
  console.log("每日任务", list)
  return [
    ...list.filter((im:any)=> im.status === 0),
    ...list.filter((im:any)=> im.status === 2),
    ...list.filter((im:any)=> im.status === 1),
  ]
}

// 任务列表
const getPlayRewardList = () => {
  activeApi.getPlayRewardList({
    userId: piniaUserinfo.getUserinfo.user.id
  }).then((response: any)=>{
    if(response.code === 200){
      taskList.value = response.rows || [];
      filterTaskData();
    }
  });
}
getPlayRewardList();

// 切换任务
const changeTaskTabs = ({nav} :any) => {
  navsActive.value = nav.active;
  filterTaskData();
}

// 获取系统时间
const getSysTime = () => {
  systemApi.getSysTime({}).then((response:any)=>{
    console.log(response.data)
  })
}

// 领取
const receive = (item:any) => {
  activeApi.rewardRecord({
    id: item.rewardId
  }).then((response:any)=>{
    if(response.code === 200){
      getPlayRewardList();
    }
  })
}

// 设置领取倒计时
const setReceiveCountdown = (t?: Date | string | number) => {
  if(timer.value){
    return;
  }else{
    timer.value = setInterval(()=>{
      const time = t ? new Date(t) : new Date();
      const h = String(23 - time.getHours()).padStart(2, '0');
      const m = String(59 - time.getMinutes()).padStart(2, '0');
      const s = String(59 - time.getSeconds()).padStart(2, '0');
      receiveCountdown.value = `${h}:${m}:${s}`;
    }, 1000);
  }
}
setReceiveCountdown();

onUnmounted(()=>{
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
@import url('./index.scss');
.z-dialog-wrapper-h5{
  .daily-tasks{
    height: calc(100% - var(--rem-90));
    .daily-tasks__left{
      width: 25% !important;
    }
    .daily-tasks__right{
      width: 50% !important;
      .daily-tasks__right-head{
        font-size: var(--rem-14) !important;
      }
      .daily-tasks__right-desc{
        line-height: 1;
        margin-top: var(--rem-5) !important;
        font-size: var(--rem-12) !important;
      }
    }
    .daily-tasks__receive{
      width: 25% !important;
      font-size: var(--rem-12) !important;
      white-space: nowrap;
      padding: 0 var(--rem-5) !important;
      height: var(--rem-30) !important;
      line-height: var(--rem-30) !important;
      text-align: center;
    }
  }
}
</style>
